<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据可视化</title>
    <link rel="stylesheet"  href="/xianwangCss/temp.css" />
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.js"></script>
    <script type="text/javascript" src="../../../js/china.js"></script>
    <script type="text/javascript" src="../../../js/flexible.js"></script>
</head>
<body style="font-size: 24px;">
<!-- 头部的盒子 -->
<header>
    <h1>数据展示</h1>
    <div class="showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "日-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
    &
</header>

<!-- 页面主体部分 -->
<section class="mainbox">
    <div class="column">
        <div class="panel rate1">
            <h2>不同共线站数乘客乘坐地铁比例</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
</section>
<script>
    // 折线图1模块制作
    (function() {
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".rate1 .chart"));
        // 2.指定配置
        var option = {
            // 通过这个color修改两条线的颜色
            color: ["#00f2f1", "#ed3f35"],
            tooltip: {
                trigger: "axis"
            },
            legend: {
                // 如果series 对象有name 值，则 legend可以不用写data
                // 修改图例组件 文字颜色
                textStyle: {
                    color: "#4c9bfd"
                },
                // 这个10% 必须加引号
                right: "10%"
            },
            grid: {
                top: "20%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                show: true, // 显示边框
                borderColor: "#012f4a", // 边框颜色
                containLabel: true // 包含刻度文字在内
            },

            xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                    "2个共站",
                    "3个共站",
                    "4个共站",
                    "5个共站",
                    "6个共站",
                ],
                axisTick: {
                    show: false // 去除刻度线
                },
                axisLabel: {
                    color: "#4c9bfd" // 文本颜色
                },
                axisLine: {
                    show: false // 去除轴线
                }
            },
            yAxis: {
                type: "value",
                axisTick: {
                    show: false // 去除刻度线
                },
                axisLabel: {
                    color: "#4c9bfd" // 文本颜色
                },
                axisLine: {
                    show: false // 去除轴线
                },
                splitLine: {
                    lineStyle: {
                        color: "#012f4a" // 分割线颜色
                    }
                }
            },
            series: [
                {
                    name: "线路调整前地铁乘客比例",
                    type: "line",
                    // true 可以让我们的折线显示带有弧度
                    smooth: true,
                    data: [14.54,23.48,31.37,32.85,45.08]
                },
                {
                    name: "线路调整后地铁乘客比例",
                    type: "line",
                    smooth: true,
                    data: [16.69,27.67,37.81,47.37,64.07]
                },
            ]
        };

        // 3. 把配置给实例对象
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
</script>
</body>
</html>
